<template>
  <div>
    <button
      v-for="page in 5"
      :key="page"
      :class="{ active: page === currentPage }"
      @click="$emit('update:currentPage', page)"
    >
      {{ page }}
    </button>
    <select
      @change="$emit('update:pageSize', $event.target.value)"
      :value="pageSize"
    >
      <option :value="100">100</option>
      <option :value="200">200</option>
      <option :value="300">300</option>
    </select>
  </div>
</template>
<script>
export default {
  name: 'Pagination',
  props: ['currentPage', 'pageSize'],
};
</script>
<style scoped>
.active {
  background: orange;
}
</style>
